<template>
  <div class="simulation-panel2 entity-log">
    <div class="toolbar">
      <span class="title">日志</span>
      <a @click="handleClose"><el-icon><Close /></el-icon></a>
    </div>
    <div class="container">
      <el-scrollbar id="timeline" class="panel-timiline">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in treeData" :key="index">
            {{ item.content }}
          </el-timeline-item>
        </el-timeline>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch, nextTick } from "vue";
import { Close } from '@element-plus/icons-vue';
import { IEntityLogPanel } from "@@/typings/panel";
import { simulPanelState, simulationState } from "@/pinia/stores/index";

const simulStore = simulationState();
const panelStore = simulPanelState();

// 响应式状态
const state = reactive<{
  treeData: IEntityLogPanel[];
}>({
  treeData: [...simulStore.entityLog.blue, ...simulStore.entityLog.red],
});

// 关闭面板
const handleClose = () => {
  panelStore.logPanelShow = false;
};

// 根据当前视角更新显示的日志
const updateTreeData = () => {
  switch (simulStore.currentPerspective) {
    case "all":
      state.treeData = [
        ...simulStore.entityLog.blue,
        ...simulStore.entityLog.red,
      ];
      break;
    case "red":
      state.treeData = [...simulStore.entityLog.red];
      break;
    case "blue":
      state.treeData = [...simulStore.entityLog.blue];
      break;
  }
  nextTick(() => {
    let div = document.getElementById("timeline");
    if (div) {
      div.scrollTop = div.scrollHeight;
    }
  });
};

// 监听视角变化
watch(
  () => simulStore.currentPerspective,
  () => {
    updateTreeData();
  }
);

// 监听日志变化
watch(
  () => [simulStore.entityLog.red, simulStore.entityLog.blue],
  () => {
    updateTreeData();
  }
);

// 初始化滚动位置
nextTick(() => {
  let div = document.getElementById("timeline");
  if (div) {
    div.scrollTop = div.scrollHeight;
  }
});

// 暴露状态
const { treeData } = toRefs(state);
</script>

<style lang="less" scoped>
@import "@@/assets/styles/panel.less";
.panel-timiline {
  height: 100%;
  color: white;
  padding-top: 5px;

  .el-timeline-item {
    font-size: 13px;
    padding-bottom: 5px;
  }
}
</style>
